var dotTotal = 150
var timer = null
var canvas = null
var ctx = null
var starArr = [] // 点的数组
var mouse_star = {} // 鼠标star
var limitLen = 100 // 连接所需最短距离
var dotTotal = 150 // 点的个数
var color = "#e6eaea" // 字体颜色

canvas_init(); // 画布初始化
star_init(); // 所有点初始化
mouseStar_init(); // 鼠标点始化
mouseEvent_init(); // 鼠标事件
timer_init(); //定时器初始化



function canvas_init() {
    canvas = document.querySelector('.star_canvas');
    ctx = canvas.getContext('2d') /* 2d表示2d画布类型 */
}

function star_init() {
    for (let i = 0; i < dotTotal; i++) {
        let star = generateStar();
        starArr.push(star);
    }
}

function timer_init() {
    timer = setInterval(() => {
        const width = window.innerWidth;
        const height = window.innerHeight;
        canvas.width = width
        canvas.height = height
        ctx.clearRect(0, 0, width, height);

        // 鼠标star移动
        Draw(ctx, mouse_star);

        // star移动
        starArr.forEach((star) => {
            Draw(ctx, star);
            Move(star);
        });

        // 比较star和所有其他star的距离，小于100连线
        starArr.forEach((star, index) => {
            for (let i = index + 1; i < starArr.length; i++) {
                if (
                    Math.abs(star.x - starArr[i].x) < limitLen &&
                    Math.abs(star.y - starArr[i].y) < limitLen
                ) {
                    DrawLine(
                        star.x,
                        star.y,
                        starArr[i].x,
                        starArr[i].y,
                        ctx
                    );
                }
            }
        });

        // 比较鼠标star和所有star的距离
        for (let i = 0; i < starArr.length; i++) {
            if (
                Math.abs(mouse_star.x - starArr[i].x) < limitLen &&
                Math.abs(mouse_star.y - starArr[i].y) < limitLen
            ) {
                DrawLine(
                    mouse_star.x,
                    mouse_star.y,
                    starArr[i].x,
                    starArr[i].y,
                    ctx
                );
            }
        }
    }, 20);
}

function mouseStar_init() {
    mouse_star = generateStar();
}

function mouseEvent_init() {
    // 鼠标移动 star跟随移动
    canvas.onmousemove = (e) => {
        mouse_star.x = e.offsetX;
        mouse_star.y = e.offsetY;
    };
    // 鼠标点击 添加star
    canvas.onclick = (e) => {
        starArr.splice(0, 5);
        for (let i = 0; i < 5; i++) {
            let star = generateStar();
            star.x = e.offsetX;
            star.y = e.offsetY;
            starArr.push(star);
        }
    };
}

function generateStar() {
    const width = window.innerWidth;
    const height = window.innerHeight;
    const star = {
        x: 0,
        y: 0,
        r: 0,
        speedX: 0,
        speedY: 0,
    };
    star.x = Math.random() * width;
    star.y = Math.random() * height;
    star.r = Math.random() * 5;
    star.speedX = randomSpeed();
    star.speedY = randomSpeed();
    return star;
}

function randomSpeed() {
    return Math.random() * 3 * Math.pow(-1, Math.round(Math.random()));
}

function Draw(ctx, star) {
    ctx.fillStyle = color;
    ctx.strokeStyle = color;
    ctx.beginPath();
    ctx.arc(star.x, star.y, star.r, 0, Math.PI * 2);
    ctx.fill();
    ctx.closePath();
}

function Move(star) {
    const width = document.body.offsetWidth;
    const height = document.body.offsetHeight;
    star.x -= star.speedX;
    star.y -= star.speedY;
    if (star.x < 0 || star.x > width) {
        star.speedX *= -1;
    }
    if (star.y < 0 || star.y > height) {
        star.speedY *= -1;
    }
}

function DrawLine(startX, startY, endX, endY, ctx) {
    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.lineTo(endX, endY);
    ctx.stroke();
    ctx.closePath();
}